<script setup lang="ts">
import { h, ref } from 'vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { CheckCircleOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'ChangePassword',
})

const router = useRouter()

// 修改密码相关
const changePasswordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})
const changePasswordLoading = ref(false)
const changePasswordFormRef = ref()

// 返回
function goBack() {
  router.back()
}

// 修改密码
async function handleChangePassword() {
  try {
    await changePasswordFormRef.value?.validate()
    
    if (changePasswordForm.value.newPassword !== changePasswordForm.value.confirmPassword) {
      message.error('两次输入的密码不一致')
      return
    }
    
    if (changePasswordForm.value.newPassword.length < 8) {
      message.error('新密码长度至少为8位')
      return
    }
    
    // 验证密码格式：8位数字
    if (!/^\d{8}$/.test(changePasswordForm.value.newPassword)) {
      message.error('密码格式有误，请输入8位数字')
      return
    }
    
    changePasswordLoading.value = true
    
    // TODO: 调用修改密码API
    // const response = await changePasswordApi({
    //   oldPassword: changePasswordForm.value.oldPassword,
    //   newPassword: changePasswordForm.value.newPassword,
    // })
    
    // 模拟成功
    Modal.success({
      title: '提示',
      content: h('div', { style: 'font-size:16px; line-height:24px; color:#333;' }, '密码修改成功'),
      icon: h(CheckCircleOutlined, { style: 'color:#376d9b;' }),
      okText: '确定',
      okButtonProps: { style: { backgroundColor: '#376d9b', border: 'none', borderRadius: '0' } } as any,
      centered: true,
      onOk: () => {
        changePasswordForm.value = {
          oldPassword: '',
          newPassword: '',
          confirmPassword: '',
        }
        changePasswordFormRef.value?.resetFields()
        router.back()
      },
    })
  }
  catch (error) {
    console.error('密码修改失败', error)
  }
  finally {
    changePasswordLoading.value = false
  }
}
</script>

<template>
  <page-container>
    <div 
    style="position: relative; top: -28px;"
    class="change-password-container">
      <div class="header-section">
      
      </div>

      <div class="form-section">
        <div class="password-form-wrapper">
          <a-form
            ref="changePasswordFormRef"
            :model="changePasswordForm"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 18 }"
            style="max-width: 600px;"
          >
            <a-form-item
              label="原密码"
              name="oldPassword"
              :rules="[{ required: true, message: '请输入原密码' }]"
            >
              <a-input-password
                v-model:value="changePasswordForm.oldPassword"
                placeholder="请输入原密码"
                size="large"
              />
            </a-form-item>
            <a-form-item
              label="新密码"
              name="newPassword"
              :rules="[
                { required: true, message: '请输入新密码' },
                { min: 8, message: '密码长度至少为8位' },
                { pattern: /^\d{8}$/, message: '密码格式有误，请输入8位数字' },
              ]"
            >
              <a-input-password
                v-model:value="changePasswordForm.newPassword"
                placeholder="请输入新密码（8位数字）"
                size="large"
                :maxlength="8"
              />
            </a-form-item>
            <a-form-item
              label="确认密码"
              name="confirmPassword"
              :rules="[
                { required: true, message: '请再次输入新密码' },
                {
                  validator: async (_rule, value) => {
                    if (value !== changePasswordForm.newPassword) {
                      throw new Error('两次输入的密码不一致')
                    }
                  },
                },
              ]"
            >
              <a-input-password
                v-model:value="changePasswordForm.confirmPassword"
                placeholder="请再次输入新密码"
                size="large"
                :maxlength="8"
              />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
              <a-button
                type="primary"
                size="large"
                :loading="changePasswordLoading"
                @click="handleChangePassword"
                style="width: 200px;"
              >
                修改密码
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </page-container>
</template>

<style scoped lang="less">
.change-password-container {
  padding: 20px;
  min-height: 100%;
}

.header-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.back-button {
  display: flex;
  align-items: center;
  color: #376d9b;
  padding: 0;
  height: auto;
  cursor: pointer;
  font-size: 16px;
  margin-top: -10px;
  
  &:hover {
    color: #0a3c74;
  }
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #0f2a51;
}

.form-section {
  display: flex;
  justify-content: center;
}

.password-form-wrapper {
  width: 100%;
  max-width: 700px;
}
</style>
